<template>
  	<el-card :body-style="{ padding: '30px' }">
      <img src="../../assets/vip.png" class="image">
      <div style="padding: 14px;">
        <span>{{item.name}} ￥{{item.point}}</span>
        <el-button  type="primary" class="button" size="small" @click="buying(item)">立即开通</el-button>
      </div>
    </el-card>
</template>
<style scoped>
  .bottom {
    margin-top: 13px;
    line-height: 2.0rem;
  }

  .button {
    float: right;
    margin-left:10px;
  }

  .image {
    width: 100%;
    display: block;

  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
<script type="text/javascript">
	export default {
    name: 'vipCard',
	  props:['item'],
    methods: {
      getVip: function(item){
          this.$message({
                message: "开通成功"
          });
      },
      submitOrder(goodsLi){
        this.$http({
          method: 'post',
          url: 'buyVip/buy',
          data: {"id":goodsLi.id}
        }).then((response)=>{
          if(response.status == 'SUCCESS'){
            this.$message({
              message:'成功！',
            });
          }else{
            this.$message({
              type:'error',
              message:'失败！',
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:'失败！',
          });
        })
      },
      buying(goodsLi){
        let msg = '即将扣取账户￥' + goodsLi.point;
        this.$confirm(msg, this.operation, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          // this.submitOrder(goodsLi);
          this.$message({
              type: 'success',
              message:'开通成功！',
          });
        });
      }
    }
	}
</script>